<template>
  <div>
    <div class="top">这是登录页面</div>
    <form action="">
      <input type="text" ref="userphone" placeholder="手机号" />
      <p @click="handleCode">发送</p>
      <input type="text" ref="usermes" placeholder="短信验证码" />
      <p @click="handleLogin" class="sub">登录</p>
    </form>
  </div>
</template>

<script>
import { messageApi, resetApi } from "../utils/api";
// import {ref,onMounted} from "vue";
export default {
  data() {
    return {
      number: "",
      mes: "",
    };
  },
  methods: {
    handleCode() {
      console.log(this.$router.options.routes[1].children[4].meta.loginmes);
      this.number = this.$refs.userphone.value;
      messageApi(this.number).then((res) => {
        console.log(res);
        console.log(this.$route);
      });
    },
    handleLogin() {
      this.mes = this.$refs.usermes.value;
      resetApi({ phone: this.number, code: this.mes }).then((res) => {
        console.log(res);
        if (res.status == 0) {
          console.log("注册成功");
          // 给我的页面添加元信息权限
          this.$router.options.routes[1].children[4].meta.loginmes = true;
          console.log(this.$router.options.routes[1].children[4].meta.loginmes);
          localStorage.setItem("user", this.number);
          localStorage.setItem("token", res.result.token);
          this.$router.push("/home/me");
        } else {
          alert("验证码错误");
        }
      });
    },
  },
};
//  setup(){
//       return{
//           value,
//           list,
//           handleKeyUp,
//           removeItem
//       };
//       onMounted(()=>{

//       })
//     }
</script>

<style scoped>
input {
  margin: 30px auto;
}
.sub {
  display: block;
  margin: 0 auto;
  text-align: center;
}
p {
  color: white;
  border-radius: 10px;
  margin: 0 auto;
  width: 50px;
  height: 30px;
  background-color: rgba(0, 0, 255, 0.829);
}
</style>
